<template>
    <div class="ied-show">
        <nav-header>
			<template slot="menuBefore">
				<li><router-link to="/affairs/led/led-list" tag="a">LED屏幕管理</router-link></li>
				<li class="gap">&gt;</li>
                <li><router-link :to="to_link" tag="a">{{ied_list.name}}</router-link></li>
				<li class="gap">&gt;</li>
			</template>
			<li>新建节目</li>
		</nav-header>
        <div class="content">
            <div class="img" v-html="img_content"></div>
            <el-form :model="showForm" :rules="rules" ref="showForm" hide-required-asterisk label-width="100px" class="demo-showForm">
                <el-form-item label="节目名称：" prop="show_name">
                    <el-input v-model="showForm.show_name"></el-input>
                </el-form-item>
                <el-form-item label="节目类型：">
                    <el-select v-model="showForm.show_type" @change="changeType" placeholder="请选择节目类型">
                        <el-option label="图片" value="0"></el-option>
                        <el-option label="单行文字" value="1"></el-option>
                        <el-option label="多行文字" value="2"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item v-if="showForm.show_type === '0'">
                    <el-upload
                        ref="imgUpload"
                        class="avatar-uploader"
                        :action="uploadAction"
                        :headers="headers"
                        :show-file-list="false"
                        :before-upload="handleBeforeUpload"
                        :on-error="handleAvatarError"
                        :on-success="handleAvatarSuccess">
                        <!-- <img v-if="pre_picture" :src="pre_picture" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
                        <div>
                            <div v-show="!pre_picture">
                                <i class="el-icon-plus avatar-uploader-icon"></i>
                            </div>
                            <div v-show="pre_picture" class="cover-box">
                                <img :src="pre_picture" />

                                <div class="uploader-close-box" v-show="pre_picture !== ''">
                                    <label class="el-upload-list__item-status-label" @click.stop="imgRemove">
                                            <transition name="el-fade-in-linear">
                                                <i class="el-icon-upload-success el-icon-check"></i>
                                            </transition>
                                            <transition name="el-fade-in-linear">
                                                <i class="el-icon-close"></i>
                                            </transition>
                                        </label>
                                </div>
                            </div>
                        </div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="文本内容：" prop="show_text" v-if="showForm.show_type === '1'">
                    <el-input v-model="showForm.show_text"></el-input>
                </el-form-item>
                <el-form-item class="show-textarea" label="文本内容：" prop="show_textarea" v-if="showForm.show_type === '2'">
                    <el-input type="textarea" maxlength="2000" :rows="5" v-model="showForm.show_textarea"></el-input>
                    <span>{{showForm.show_textarea.length}} / 2000</span>
                </el-form-item>

                <el-form-item label="图片位置：" class="screen-size">
                    <el-col :span="8">
                        <el-form-item label="X：">
                            <el-input type="number" v-model="showForm.Xaxis"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="2"></el-col>
                    <el-col :span="8">
                        <el-form-item label="Y：">
                            <el-input type="number" v-model="showForm.Yaxis"></el-input>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="宽高：" class="screen-size">
                    <el-col :span="8">
                        <el-form-item label="宽：">
                            <el-input type="number" v-model="showForm.width"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="2"></el-col>
                    <el-col :span="8">
                        <el-form-item label="高：">
                            <el-input type="number" v-model="showForm.height"></el-input>
                        </el-form-item>
                    </el-col>
                </el-form-item>

                <!-- <el-form-item label="图片缩放：" v-if="showForm.show_type === '0'">
                    <el-select v-model="showForm.show_zoom">
                        <el-option v-for="(item, index) in zoom_list" :key="index" :label="item" :value="index"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="文本颜色：" v-if="showForm.show_type !== '0'">
                    <el-color-picker v-model="showForm.show_color"></el-color-picker>
                </el-form-item>
                <el-form-item label="文本背景：" v-if="showForm.show_type !== '0'">
                    <el-color-picker v-model="showForm.show_bg"></el-color-picker>
                </el-form-item>
                <el-form-item label="文本大小：" v-if="showForm.show_type !== '0'">
                    <el-select v-model="showForm.show_size" placeholder="请选择文本大小">
                        <el-option v-for="(item, index) in size_list" :key="index" :label="item" :value="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="特效设置：" v-if="showForm.show_type === '1'">
                    <el-select v-model="showForm.show_special" placeholder="请选择特效设置">
                        <el-option label="连续左移" value="1"></el-option>
                        <el-option label="自动翻页" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="特效设置：" v-if="showForm.show_type === '2'">
                    <el-select v-model="showForm.show_special2" placeholder="请选择特效设置">
                        <el-option label="连续上移" value="1"></el-option>
                        <el-option label="自动翻页" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="show-time" label="停留时间：" prop="show_time" 
                    v-if="showForm.show_special2 === '0' || showForm.show_special === '0'">
                    <el-input type="number" v-model="showForm.show_time"></el-input>
                    <span>秒</span>
                </el-form-item>

                <el-form-item>
                    <el-button style="padding: 10px 32px;" type="primary" @click="saveSubmit('showForm')">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                img_content: null,
                ied_list: null,
                retryTimes: 10,
                pre_picture: '', // 显示图片预览
                to_link: '/affairs/led/led-detail/',
                uploadAction: this.BASE_URL + '/api/resource/res_upload',
                list_data: [],
                imageType: ['image/jpeg', 'image/bmp', 'image/png'], // 上传图片格式
                zoom_list: ['50%', '80%', '120%', '150%', '180%', '200%'],
                size_list: [6, 7, 8, 10, 11, 12, 13, 14, 16, 18, 20, 28, 36, 48, 72],
                headers: {Authorization: `Bearer ` + this.$g.access_token},
                showForm: {
                    show_name: '', // 节目名称
                    show_type: '0', // 节目类型
                    Xaxis: '0', // x 轴
                    Yaxis: '0', // y 轴
                    width: '1000',
                    height: '1000',
                    show_img: '', // 图片地址
                    show_zoom: 2, // 图片缩放
                    show_text: null, // 单文本内容
                    show_textarea: '', // 多文本内容
                    show_color: '#000000', // 文本颜色
                    show_bg: '#ffffff', // 文本背景
                    show_size: 8, // 文本大小
                    show_special: '1', // 单行-特效设置
                    show_special2: '1', // 多行-特效设置
                    show_time: '2', // 停留时间
                },
                rules: {
                    show_name: [
                        { required: true, message: '请输入节目名称', trigger: 'blur' },
                    ],
                    show_text: [
                        { required: true, message: '请输入单行文字内容', trigger: 'blur' },
                    ],
                    show_textarea: [
                        { required: true, message: '请输入多行文字内容', trigger: 'blur' },
                    ],
                }
            }
        },
        created() {
            this.ied_list = JSON.parse(sessionStorage.getItem('ied_list'));
            this.to_link = '/affairs/led/led-detail/' + this.ied_list.id;

            this.getShowList();
        },
        methods: {
            /**
             * 当前设备的节目
             */
            getShowList() {
                let success = (res=>{
                    this.list_data = [];

                    if (!is_empty(res.data.contents)) {
                        res.data.contents[0].content.forEach(item => {
                            this.list_data.push(item.name.substr(0, item.name.length - 4));
                        })
                    }
            	})
                let params = {id: this.ied_list.id};

            	this.$ajax.get('api/led/programlist', {params: params, func:{success: success}})
            },
            /** 图片上传 begin */
            /**
             * 上传图片之前判断格式
             */
            handleBeforeUpload(file) {
                let file_type = file.type.toLocaleLowerCase();
                const isLt2M = file.size / 1024 / 1024 < 10;

                if (!this.imageType.includes(file_type)) {
                    this.$message.warning('只允许上传 bmp/jpg/jpeg/png 格式图片');
                    return false;
                }
                if (!isLt2M) {
                    this.$message.error('图片大小不能超过 10MB!');
                    return false;
                }
            },
            /**
             * 上传图片成功后
             */
            handleAvatarSuccess(res, file) {
                // res.data =  res.data.data;
                this.pre_picture = URL.createObjectURL(file.raw);
                this.showForm.show_img = res.data.file_path;
            },
            /**
             * 上传图片失败
             */
            handleAvatarError(err, file, fileList) {
                var mess = eval('(' + err + ')');

                if (parseInt(mess.error) === 401 && this.retryTimes > 0) {
                    let callbcak = (data => {
                        this.retryTimes--;
                        this.$refs.upload.submit(file);
                    })
                    this.get_access_token(callbcak);
                } else {
                    this.$message.error(mess.msg);
                }
            },
            clearFilet() {
                this.pre_picture = '';
                this.$refs['imgUpload'].uploadFiles = [];
            },
            imgRemove() {
                this.clearFilet();
            },
            /** 图片上传 end */
            /**
             * 获取当前投屏内容
             */
            getScreen() {
                let success = (res=>{
                    let time = new Date().getTime();
                    this.img_content = `<img src='http://${res.data.ip}/api/screenshot?${time}' />`;
            	})
                let params = {id: this.ied_list.id}

            	this.$ajax.get('api/led/single', {params: params, func:{success: success}})
            },
            /**
             * 改变节目类型，清空数据
             * @param {String} type 类型id
             */
            changeType(type) {
                // this.showForm.show_name = '';
                // this.showForm.Xaxis =  '0';
                // this.showForm.Yaxis =  '0';
                // this.showForm.width =  '1000';
                // this.showForm.height = '1000';
                this.showForm.show_img =  '';
                this.showForm.show_zoom =  2;
                this.showForm.show_text =  null;
                this.showForm.show_textarea =  '';
                this.showForm.show_color =  '#000000';
                this.showForm.show_bg =  '#ffffff';
                this.showForm.show_size =  8;
                this.showForm.show_special =  '1';
                this.showForm.show_special2 =  '1';
                this.showForm.show_time =  '2';

                this.pre_picture = '';
                this.$refs['showForm'].clearValidate();
            },
            /**
             * 十六进制颜色转换为ARGB
             * @param {String} color #0078ff
             */
            colorToARGB(color) {
                let temp = '0xFF' + color.substr(1);

                // let alpha = (temp & 0xff000000) >>> 24;
                // let red   = (temp & 0x00ff0000) >> 16;
                // let green = (temp & 0x0000ff00) >> 8;
                // let blue  = (temp & 0x000000ff);
                // let res = '0x' + alpha + red + green + blue;

                return temp;
            },
            /**
             * 覆盖现有节目
             */
            coverShow() {
                
            },
            /**
             * 验证节目内容
             * @param {String} formName 表单名字
             */
            saveSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let flag = false;

                        this.list_data.forEach(item => {
                            if (this.showForm.show_name == item) {
                                flag = true;
                            }
                        })

                        if (flag) {
                            let yes = (res => {
                                this.saveShow();
                            })
                            let cancel = ( res => {
                                return false;
                            })
                            
                            this.e_confirm({yes: yes, cancel: cancel, txt: '是否要覆盖同名节目？'});
                        } else {
                            this.saveShow();
                        }
                    } else {
                        return false;
                    }
                });
            },
            /**
             * 保存目内容
             */
            saveShow() {
                let params = null;

                let success = (res => {
                    this.$message.success(res.msg);

                    // if (this.showForm.show_type === '0') {
                    //     this.showForm.show_name = '';
                    //     this.showForm.Xaxis =  '0';
                    //     this.showForm.Yaxis =  '0';
                    //     this.showForm.width =  '0';
                    //     this.showForm.height = '0';
                    //     this.showForm.show_img =  '';
                    //     this.showForm.show_zoom =  2;
                    //     this.pre_picture = '';
                    // } else if (this.showForm.show_type === '1') {
                    //     this.showForm.show_name = '';
                    //     this.showForm.Xaxis =  '0';
                    //     this.showForm.Yaxis =  '0';
                    //     this.showForm.width =  '0';
                    //     this.showForm.height = '0';
                    //     this.showForm.show_text =  null;
                    //     this.showForm.show_color =  '#000000';
                    //     this.showForm.show_bg =  '#ffffff';
                    //     this.showForm.show_size =  8;
                    //     this.showForm.show_special =  '1';
                    //     this.showForm.show_time =  '2';
                    // } else if (this.showForm.show_type === '2') {
                    //     this.showForm.show_name = '';
                    //     this.showForm.Xaxis =  '0';
                    //     this.showForm.Yaxis =  '0';
                    //     this.showForm.width =  '0';
                    //     this.showForm.height = '0';
                    //     this.showForm.show_textarea =  '';
                    //     this.showForm.show_color =  '#000000';
                    //     this.showForm.show_bg =  '#ffffff';
                    //     this.showForm.show_size =  8;
                    //     this.showForm.show_special2 =  '1';
                    //     this.showForm.show_time =  '2';
                    // }
                    
                    this.img_content = null;
                    this.getScreen();
                    this.getShowList();
                })

                if (this.showForm.show_type === '0') {
                    params = {
                        id: this.ied_list.id,
                        program_name: this.showForm.show_name,
                        x: this.showForm.Xaxis,
                        y: this.showForm.Yaxis,
                        width: this.showForm.width,
                        height: this.showForm.height,
                        file_path: this.showForm.show_img
                    }

                    this.$ajax.post('api/led/onepic', params, {func: {success: success}})
                } else if (this.showForm.show_type === '1') {
                    params = {
                        id: this.ied_list.id,
                        program_name: this.showForm.show_name,
                        text: this.showForm.show_text,
                        x: this.showForm.Xaxis,
                        y: this.showForm.Yaxis,
                        width: this.showForm.width,
                        height: this.showForm.height,
                        text_color: this.colorToARGB(this.showForm.show_color),
                        back_color: this.colorToARGB(this.showForm.show_bg),
                        font_size: this.size_list[this.showForm.show_size],
                        play_type: this.showForm.show_special,
                        stop_duration: this.showForm.show_time
                    }

                    this.$ajax.post('api/led/singleline', params, {func: {success: success}})
                } else if (this.showForm.show_type === '2') {
                    let temp = this.showForm.show_textarea.replace(/↵/g, '\r\n');
                    // let temp = this.showForm.show_textarea;
                    params = {
                        id: this.ied_list.id,
                        program_name: this.showForm.show_name,
                        text: temp,
                        x: this.showForm.Xaxis,
                        y: this.showForm.Yaxis,
                        width: this.showForm.width,
                        height: this.showForm.height,
                        text_color: this.colorToARGB(this.showForm.show_color),
                        back_color: this.colorToARGB(this.showForm.show_bg),
                        font_size: this.size_list[this.showForm.show_size],
                        play_type: this.showForm.show_special2,
                        stop_duration: this.showForm.show_time,
                    }

                    this.$ajax.post('api/led/multiline', params, {func: {success: success}})
                }
            }
        },
    }
</script>
<style lang="scss">
    .ied-show {
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader div {
            width: 178px;
            height: 178px;

            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }
        
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }

        .avatar-uploader {
            width: 178px;
            height: 178px;

            >div {
                width: 100%;
                height: 100%;
                line-height: 178px;

                .cover-box {
                    position: relative;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 100%;
                    .uploader-close-box {
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        z-index: 99;
                        overflow: hidden;
                        >img {
                            width: 100%;
                            height: 100%;
                            object-fit: contain;
                        }
                        .el-upload-list__item-status-label {
                            display: block;
                            position: absolute;
                            right: -17px;
                            top: -7px;
                            width: 46px;
                            height: 26px;
                            background: #13ce66;
                            text-align: center;
                            transform: rotate(45deg);
                            box-shadow: 0 1px 1px #ccc;
                            .el-icon-check {
                                position: absolute;
                                left: 17px;
                                font-size: 12px;
                                margin-top: 12px;
                                color: #fff;
                                transform: rotate(-45deg);
                                font-family: 'element-icons' !important;
                                speak: none;
                                font-style: normal;
                                font-weight: normal;
                                font-variant: normal;
                                text-transform: none;
                                line-height: 1;
                                vertical-align: baseline;
                                display: inline-block;
                                -webkit-font-smoothing: antialiased;
                            }
                            .el-icon-check:before {
                                content: "\E6DA";
                            }
                            .el-icon-close {
                                display: none;
                            }
                        }
                    }
                    .uploader-close-box:hover {
                        background: rgba(0, 0, 0, .3);
                        .el-upload-list__item-status-label {
                            top: -4px;
                            right: -15px;
                            background: #f56c6c;
                            box-shadow: none;
                            cursor: pointer;
                            .el-icon-check {
                                display: none;
                            }
                            .el-icon-close {
                                position: absolute;
                                transform: rotate(-45deg);
                                top: 10px;
                                color: #fff;
                                right: 16px;
                                font-size: 12px;
                                font-family: 'element-icons' !important;
                                speak: none;
                                font-style: normal;
                                font-weight: normal;
                                font-variant: normal;
                                text-transform: none;
                                line-height: 1;
                                vertical-align: baseline;
                                display: inline-block;
                                -webkit-font-smoothing: antialiased;
                            }
                            .el-icon-close:before {
                                content: "\E6DB";
                            }
                        }
                    }
                }
            }
            .el-icon-upload {
                font-size: 50px;
                vertical-align: middle;
            }
        }

        .content {
            .img {
                margin: 25px 0;
                width: 70%;
                height: 500px;
                border: 1px solid #ccc;
                background: #000;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            }

            .demo-showForm {
                width: 50%;
                min-width: 700px;

                .show-textarea {
                    >div {
                        position: relative;

                        >span {
                            position: absolute;
                            right: 15px;
                            bottom: 0;
                            color: #999;
                        }
                    }
                }

                .screen-size {
                    .el-form-item__content {
                        .el-col .el-form-item {
                            label {
                                width: 20px !important;
                                text-align: left;
                            }

                            >div {
                                margin-left: 35px !important;

                                input {
                                    width: 100px;
                                }
                            }
                        }
                    }
                }

                .show-time {
                    >div {
                        display: flex;
                        align-items: center;
                        flex-direction: row;

                        >span {
                            margin-left: 10px;
                        }
                    }
                }
            }
        }
    }
</style>
